<template>
  <div>
    <el-dialog
      title="添加字段信息"
      width="950px"
      :visible.sync="is_visible"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-form size="small" label-width="60px" style="margin-right: 30px">
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="表名:"
              :error="String(errors.name ? errors.name : '')"
            >
              <el-input v-model="form_data.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="别名:"
              :error="String(errors.alias ? errors.alias : '')"
            >
              <el-input v-model="form_data.alias" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
                <el-row>
          <el-col :span="12">
            <el-form-item
              label="创建人:"
              :error="String(errors.name ? errors.name : '')"
            >
              <el-input v-model="form_data.creator_username" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="日期:"
              :error="String(errors.alias ? errors.alias : '')"
            >
              <el-input v-model="form_data.creation_time" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="描述:"
              :error="String(errors.alias ? errors.alias : '')"
            >
              <el-input v-model="form_data.readme" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs  tab-position="left" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(tab_v, tab_k) in tab_pane" :key="tab_v" :label="tab_k" :name="tab_v.toString()">
          <el-form
            v-for="(item, index) in field_data.fields"
            :key="index"
            size="small"
            :inline="true"
            label-width="60px"
          >
            <el-form-item
              label="字段:"
              style="margin-right: 0px"
            ></el-form-item>
            <el-form-item
              style="width: 100px"
              :error="
                String(
                  errors.fields && errors.fields[index].name
                    ? errors.fields[index].name
                    : ''
                )
              "
            >
              <el-input
                v-model="item.name"
                placeholder="字段名"
                :disabled="!('is_submited' in item) || item.is_submited"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              style="width: 100px"
              :error="
                String(
                  errors.fields && errors.fields[index]['alias']
                    ? errors.fields[index]['alias']
                    : ''
                )
              "
            >
              <el-input
                v-model="item.alias"
                placeholder="别名"
                :disabled="!('is_submited' in item) || item.is_submited"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              style="width: 100px"
              :error="
                String(
                  errors.fields && errors.fields[index].type
                    ? errors.fields[index]['type']
                    : ''
                )
              "
            >
              <el-select
                v-model="item.type"
                placeholder="选择字段类型"
                :disabled="!('is_submited' in item) || item.is_submited"
              >
                <el-option label="字符串" :value="0"></el-option>
                <el-option label="整数" :value="1"></el-option>
                <el-option label="浮点数" :value="2"></el-option>
                <el-option label="日期时间" :value="3"></el-option>
                <el-option label="日期" :value="4"></el-option>
                <el-option label="布尔" :value="5"></el-option>
                <el-option label="IP地址" :value="6"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :error="
                String(
                  errors.fields && errors.fields[index].required
                    ? errors.fields[index]['required']
                    : ''
                )
              "
            >
              <el-checkbox
                v-model="item.required"
                :disabled="!('is_submited' in item) || item.is_submited"
                >必填</el-checkbox
              >
            </el-form-item>
            <el-form-item
              :error="
                String(
                  errors.fields && errors.fields[index].is_multi
                    ? errors.fields[index]['is_multi']
                    : ''
                )
              "
            >
              <el-checkbox
                v-model="item.is_multi"
                :disabled="!('is_submited' in item) || item.is_submited"
                >多值</el-checkbox
              >
            </el-form-item>
            <el-form-item
              :error="
                String(
                  errors.fields && errors.fields[index].readme
                    ? errors.fields[index]['readme']
                    : ''
                )
              "
            >
              <el-input
                v-model="item.readme"
                placeholder="自述"
                style="width: 150px"
                :disabled="!('is_submited' in item) || item.is_submited"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                size="mini"
                type="primary"
                style="margin: 0px 1px"
                v-show="'is_submited' in item && !item.is_submited"
                @click="on_field_submit(item, index)"
              >
                确定
              </el-button>
              <el-button
                size="mini"
                type="main"
                style="margin: 0px 1px"
                v-show="'is_submited' in item && !item.is_submited"
                @click="on_field_cancel(item, index)"
              >
                取消
              </el-button>
              <el-button
                size="mini"
                type="danger"
                style="margin: 0px 1px"
                v-show="!('is_submited' in item) || item.is_submited"
                @click="on_field_delete(item, index)"
                v-hasPermi="['admin:table:field:{id}:delete']"
              >
                删除
              </el-button>
            </el-form-item>
          </el-form>
          <el-form label-width="60px" style="margin-right: 30px">
            <el-form-item>
              <el-button
                size="small"
                style="width: 100%"
                type="primary"
                :loading="loading"
                @click="on_add_field(tab_v)"
                v-hasPermi="['admin:table:field:post']"
                >添加字段</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { addField, delField, listField } from "@/api/vadmin/cmdb/table";

export default {
  name: "change-table",
  components: {},
  data() {
    return {
      is_visible: false,
      loading: false,
      form_data: {},
      field_data: {fields:[]},
      data: {},
      errors: {},
      activeName: 0,
      table: "",
      tab_pane: {
        基本属性: 0,
        私有属性: 1,
      },
    };
  },
  created() {},
  methods: {
    handleClose() {
      this.is_visible = false;
      this.data = false;
      this.$emit("listenChileEvent", 1);
    },
    handleClick() {
      this.field_data= {fields:[]}
      console.log(this.activeName)
      listField({attr:this.activeName,table_id:this.table}).then((response)=>{
        this.field_data={fields:response.results}
      })
    },
    on_show(data, table) {
      console.log("cccccccc",this.activeName)
      this.table = table.id;
      this.is_visible = data;
      this.data = this.is_visible;
      this.form_data = JSON.parse(JSON.stringify(table));
      listField({attr:this.activeName,table:this.table}).then((response)=>{
        this.field_data={fields:response.results}
      })
    },
    on_field_submit(item, index) {
      // api创建字段
      console.log(item)
      item.table = this.form_data.id;
      addField(item).then((response) => {
          this.loading = false;
          this.msgSuccess("添加字段成功");
          item.is_submited = true;
          item.id = response.id;
          this.errors = {};
        })
        .catch(error => {
          this.loading = false;
          this.errors = error.response.data;
        }); 
      // this.loading = true;
    },
    on_field_cancel(item, index) {
      this.field_data.fields.splice(index, 1);
    },
    on_field_delete(item, index) {
      delField(item.id).then((response)=>{
        this.loading = false;
        this.msgSuccess("删除成功");
        listField({attr:0,table_id:this.table}).then((response)=>{
        this.field_data={fields:response.results}
      })
      })
    },

    on_add_field(fieldType) {
      console.log(fieldType)
      var fields = this.field_data.fields;
      fields.splice(fields.length, 0, {
        name: "",
        alias: "",
        readme: "",
        attr:fieldType,
        type: 0,
        is_multi: false,
        required: false,
        is_submited: false,
      });
    },
  },
};
</script>

<style scoped>
</style>
